<template>
	<view class="info"  :style="{minHeight: pageHeight + 'px'}">
		<!-- <u-navbar
			title="我的信息"
			@rightClick="rightClick"
			:autoBack="true"
			style="padding-bottom: 88px;"
		>
		</u-navbar> -->
		
		<view class="fix-nav">
			<view style="width: 180px;margin: 0 auto;display: flex;">
				<text @click="tabIndex = 0" :style="{color: tabIndex == 0 ? '#EF312A' : '#292424'}" style="display: inline-block;flex: 1;text-align: center;">系统通知</text>
				<text @click="tabIndex = 1" :style="{color: tabIndex == 1 ? '#EF312A' : '#292424'}" style="display: inline-block;flex: 1;text-align: center;">消息回复</text>
			</view>
		</view>
		
		<view v-if="tabIndex == 0" style="width: 345px;margin: 15px auto;background-color: #fff;border-radius: 10px;padding: 15px;box-sizing: border-box;">
			<view style="display: flex;font-size: 14px;margin-bottom: 10px;">
				<text style="flex: 1;">
					<u--image src="../../../static/images/icon-notice.svg" width="20px" height="20px" style="display: inline-block;margin-right: 15px;vertical-align: middle;"></u--image>
					<text style="vertical-align: middle;">系统通知</text>
				</text>
				<text style="flex: 0 0 60px;text-align: right;color: rgba(35, 33, 34, 0.6);font-size: 12px;">今天14:25</text>
			</view>
			<u-line></u-line>
			<view style="display: flex;margin-top: 10px;">
				<view style="flex: 1;font-size: 14px;">
					<text style="display: block;margin-bottom: 10px;color: #333;">隧道、深井、人防的应急通信问题</text>
				</view>
			</view>
		</view>
		
		<view v-if="tabIndex == 1" style="width: 345px;margin: 15px auto;background-color: #fff;border-radius: 10px;padding: 15px;box-sizing: border-box;">
			<view style="display: flex;font-size: 14px;margin-bottom: 10px;">
				<text style="flex: 1;">
					<u--image src="../../../static/images/icon-notice.svg" width="20px" height="20px" style="display: inline-block;margin-right: 15px;vertical-align: middle;"></u--image>
					<text style="vertical-align: middle;">系统通知</text>
				</text>
				<text style="flex: 0 0 60px;text-align: right;color: rgba(35, 33, 34, 0.6);font-size: 12px;">今天14:25</text>
			</view>
			<u-line></u-line>
			<view style="display: block;margin-top: 10px;">
				<view style="font-size: 14px;">
					<text style="display: block;margin-bottom: 10px;color: #333;">隧道、深井、人防的应急通信问题</text>
				</view>
				
				<view class="reply" style="font-size: 14px;width: 315px;height: 90px;background: #F7F8FA;border-radius: 10px;box-sizing: border-box;padding: 10px;">
					<text style="display: block;color: rgba(35, 33, 34, 0.6);">用户9827：</text>
					<text style="font-size: 14px;color: #232122">我觉得这个产品的功能性还是蛮够的，不过产品的品控力度还是不行</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				pageHeight: 0
			}
		},
		created() {
			this.$nextTick(() => {
				uni.getSystemInfo({
				  success: (res) => {  
					this.pageHeight = res.windowHeight
				  }  
				});
				
		
			})
		},
	}
</script>

<style lang="scss" scoped>
	.info {
		background: #F7F8F9;
		// padding-top: 15px;
	}
	.outlogin {
		width: 345px;
		height: 50px;
		background: #F22828;
		border-radius: 10px 10px 10px 10px;
		color: #fff;
		text-align: center;
		margin: 30px auto;
		line-height: 50px;
		font-size: 14px;
	}
	.fix-nav {
		width: 100%;
		height: 44px;
		line-height: 44px;
		// position: fixed;
		background-color: rgb(255, 255, 255);
		top: 43px;
		z-index: 700;
		
		text {
			font-size: 16px;
			color: #292424;
		}
	}
</style>